<!--author:蒋鑫-->
<!--data:2021/2/27-->
<!--文件资源上传-->
<body>
<div class="layui-form layuimini-form">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm" style="width:90%;">
        <input type="hidden" id="userid" name="userid">
        <div class="layui-upload">
            <div class="layui-upload-list">
                <div class="layui-col-md12 layui-col-xs12">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" id="selectFile" type="button">选择文件</button>
                        <button class="layui-btn" type="submit" lay-submit lay-filter="doSubmit">开始上传</button>
                        <a id="startUpload" href="javascript:;" hidden>33</a>
                    </div>
                </div>
                <div class="layui-col-md12 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md9 layui-col-xs7">
                            <div class="layui-form-item magt3" style="margin-top: 8px;">
                                <label class="layui-form-label">资源名称</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" id="finame" lay-verify="required" name="finame"
                                           placeholder="请输入资源名称"
                                           type="text">
                                </div>
                            </div>
                            <div class="layui-form-item magt3" style="margin-top: 8px;">
                                <label class="layui-form-label">资源描述</label>
                                <div class="layui-input-block">
                                           <textarea class="layui-input" id="fiinfo" lay-verify="required"
                                                     name="fiinfo"
                                                     placeholder="简要介绍一下资源内容,适合人群等..." placeholder="请输入相关描述"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item magt3" style="margin-top: 8px;">
                                <label class="layui-form-label">资源分类</label>
                                <div class="layui-input-block">
                                    <select id="catgry" lay-verify="required" name="catgry">
                                        <option value="java">java</option>
                                        <option value="c">C语言</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item magt3" style="margin-top: 8px;">
                                <label class="layui-form-label">文件类型</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" id="fitype" lay-verify="required" name="fitype"
                                           type="text" readonly>
                                </div>
                            </div>
                            <div class="layui-form-item magt3" style="margin-top: 8px;">
                                <label class="layui-form-label">资源标签</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" id="fitags" name="fitags"
                                           placeholder="不同标签请用逗号隔开">
                                </div>
                            </div>
                            <div class="layui-form-item magt3" style="margin-top: 8px;">
                                <label class="layui-form-label">积分定价</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="number" id="points" name="points" value="0" min="0"
                                           max="5">
                                </div>
                            </div>
                            <div class="layui-form-item magt3" style="margin-top: 8px;">
                                <label class="layui-form-label">文件大小</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" id="fisize" lay-verify="required" name="fisize"
                                           type="hidden" readonly>
                                    <input class="layui-input" id="fileSize" lay-verify="required" name="fileSize"
                                           type="text" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    // 通过字节计算文件大小
    function pow1024(num) {
        return Math.pow(1024, num)
    }

    let files = [];
    layui.use(['form', 'element', 'upload', 'config', 'admin'], function () {
        let $ = layui.jquery,
            form = layui.form,
            config = layui.config,
            admin = layui.admin,
            upload = layui.upload;

        form.on('submit(doSubmit)', function (data) {
            document.getElementById("startUpload").click();
            return false;
        })


        //上传
        let demoListView = $('#dataFrm')
            , uploadListIns = upload.render({
            elem: '#selectFile'
            , url: config.base_server + 'api-forum/resources/upload?access_token=' + config.getToken().access_token //改成您自己的上传接口
            , accept: 'file'
            , exts: 'txt|rar|zip|doc|docx|pdf|xls|xlsx|md' //允许上传的文件类型
            , multiple: true
            , auto: false
            , bindAction: '#startUpload'
            , before: function (obj) { //文件上传之前的回调
                $("#userid").val(config.getUser().id)
                this.data = {
                    'userid': $("#userid").val(),
                    'fiinfo': $("#fiinfo").val(),
                    'catgry': $("#catgry").val(),
                    'fitags': $("#fitags").val(),
                    'points': $("#points").val()
                }
                //判断文件大小
                if ($("#fileSize").val() > 200) {
                    layer.msg("上传文件不能大于200MB", {
                        time: 1000,
                        end: function () {
                            window.location.reload();
                        }
                    });
                    return false;
                }
            }
            , choose: function (obj) {
                //读取本地文件
                obj.preview(function (index, file, result) {
                    $("#finame").val(file.name);
                    //文件大小 file.size返回的是文件的字节大小
                    //fileSize:显示给用户看的文件大小，fisize:单位为字节，传递给后端用的
                    if (file.size < pow1024(1)) {
                        $("#fileSize").val(file.size + 'B');
                    } else if (file.size < pow1024(2)) {
                        $("#fileSize").val((file.size / pow1024(1)).toFixed(2) + ' KB');
                    } else if (file.size < pow1024(3)) {
                        $("#fileSize").val((file.size / pow1024(2)).toFixed(2) + ' MB');
                    } else if (file.size < pow1024(4)) {
                        $("#fileSize").val((file.size / pow1024(3)).toFixed(2) + ' GB');
                    }
                    $("#fisize").val(file.size)
                    //获取文件后缀名
                    let fileName = $("#finame").val().lastIndexOf('.');
                    let fileNameLen = $("#finame").val().length;
                    let fileType = $("#finame").val().substring(fileName + 1, fileNameLen);
                    $("#fitype").val(fileType);
                });
            }
            //上传完毕的回调
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    layer.msg(res.msg, {
                        time: 1000,
                        end: function () {
                            window.location.reload();
                        }
                    });
                }
            }
        });
    });

</script>
</body>